import React from 'react';
import {
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    Button,
    Alert,
    CircularProgress
} from '@mui/material';
import { motion } from 'framer-motion';

const MotionDialog = motion(Dialog);

const ConfirmDialog = ({
    open,
    title = "确认操作",
    content = "您确定要执行此操作吗？",
    confirmText = "确认",
    cancelText = "取消",
    onConfirm,
    onCancel,
    confirmColor = "error",
    confirmLoading = false,
    error = null
}) => {
    return (
        <MotionDialog
            open={open}
            onClose={onCancel}
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.9 }}
            transition={{ duration: 0.2 }}
        >
            <DialogTitle>{title}</DialogTitle>
            <DialogContent>
                {error && (
                    <Alert severity="error" sx={{ mb: 2 }}>
                        {error}
                    </Alert>
                )}
                <DialogContentText>
                    {content}
                </DialogContentText>
            </DialogContent>
            <DialogActions sx={{ px: 3, pb: 2 }}>
                <Button
                    onClick={onCancel}
                    variant="outlined"
                    component={motion.button}
                    whileTap={{ scale: 0.95 }}
                    sx={{ minWidth: 100 }}
                    disabled={confirmLoading}
                >
                    {cancelText}
                </Button>
                <Button
                    onClick={onConfirm}
                    color={confirmColor}
                    variant="contained"
                    autoFocus
                    component={motion.button}
                    whileTap={{ scale: 0.95 }}
                    sx={{ ml: 1, minWidth: 100 }}
                    disabled={confirmLoading}
                    startIcon={confirmLoading ? <CircularProgress size={20} color="inherit" /> : null}
                >
                    {confirmLoading ? "处理中..." : confirmText}
                </Button>
            </DialogActions>
        </MotionDialog>
    );
};

export default ConfirmDialog; 